<script setup lang="ts">
import { ref } from 'vue'

const currentDate = ref('2024年1月15日')
</script>

<template>
  <div class="blog-post">
    <header class="post-header">
      <h1>技术创新与未来发展</h1>
      <div class="post-meta">
        <span class="post-date">发布时间：{{ currentDate }}</span>
        <span class="post-author">作者：张明</span>
      </div>
    </header>
    
    <article class="post-content">
      <p>在当今快速发展的数字时代，技术创新正在深刻改变着我们的生活方式。人工智能、区块链、物联网等新兴技术的出现，为各个行业带来了前所未有的机遇和挑战。</p>
      
      <h2>人工智能的应用</h2>
      <p>人工智能技术已经渗透到我们生活的方方面面，从智能助手到自动驾驶，从医疗诊断到金融分析，都展现了强大的应用潜力。未来，随着技术的不断进步，人工智能将在更多领域发挥重要作用。</p>
      
      <h2>可持续发展</h2>
      <p>在追求技术进步的同时，我们也需要关注可持续发展。绿色技术、节能减排、环境保护等议题越来越受到重视。如何平衡发展与环保，是我们面临的重要课题。</p>
      
      <h2>未来展望</h2>
      <p>展望未来，技术创新将继续推动社会进步，改善人们的生活质量。我们需要以开放的心态拥抱变化，同时保持理性思考，确保技术发展始终服务于人类福祉。</p>
    </article>
    
    <footer class="post-footer">
      <div class="tags">
        <span class="tag">技术创新</span>
        <span class="tag">人工智能</span>
        <span class="tag">可持续发展</span>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.blog-post {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: #e0e0e0;
}

.post-header {
  margin-bottom: 30px;
  text-align: center;
}

h1 {
  font-size: 2em;
  color: #fff;
  margin-bottom: 15px;
}

.post-meta {
  color: #a0a0a0;
  font-size: 0.9em;
}

.post-meta span {
  margin: 0 10px;
}

.post-content {
  line-height: 1.8;
  color: #d0d0d0;
}

h2 {
  color: #fff;
  margin: 25px 0 15px;
  font-size: 1.5em;
}

p {
  margin-bottom: 20px;
}

.post-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #404040;
}

.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  background: #404040;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.9em;
  color: #a0a0a0;
}
</style>